<template>
    <div>
        <div id="main3" style="width: 100%;height:17.5rem;position: absolute;left: 0;top: -1.875rem;margin: auto;"></div>
    </div>
</template>
  
<script setup lang="ts">
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';
import { RequestStatisticGetPriceOfSettle } from "@/api/path/index.js";

// 基于准备好的dom，初始化echarts实例
// 绘制图表
onMounted(() => {
    var chartDom = document.getElementById('main3');
    var myChart = echarts.init(chartDom);
    var option;
    option = {
        grid: {
            top: '16%',
            left: '3%',
            right: '3%',
            bottom: '10%',
            containLabel: true,
        },
        tooltip: {
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#000'
                }
            }
        },
        xAxis: [
            {
                type: 'category',
                boundaryGap: false,
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            }
        ],
        yAxis: [
            {
                type: 'value'
            }
        ],
        series: [
            {
                name: 'Line 1',
                type: 'line',
                // stack: 'Total',      
                smooth: true,
                lineStyle: {
                    width: 2
                },
                showSymbol: false,
                areaStyle: {
                    opacity: 0.8,
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                            offset: 0,
                            color: 'rgba(0,0,0,0.2)'
                        },
                        {
                            offset: 1,
                            color: 'rgba(0, 0, 0,.1)'
                        }
                    ])
                },
                emphasis: {
                    focus: 'series'
                },
                data: [140, 232, 101, 264, 90, 340, 2000]
            }
        ]
    };

    option && myChart.setOption(option);
})

</script>
  
<style lang="scss" scoped>
#main3 {
    position: none;
}
</style>